import { NODE_SETING_ENUM } from '../../../graph/config'

const allNodeOptions = [
  {
    name: NODE_SETING_ENUM.WIDTH,
    tagName: 'slider',
    label: '长',
    props: {
      min: 10,
      max: 360
    },
    changeMethod: 'onWidthChange'
  },
  {
    name: NODE_SETING_ENUM.HEIGHT,
    tagName: 'slider',
    label: '高',
    props: {
      min: 10,
      max: 360
    },
    changeMethod: 'onHeightChange'
  },
  {
    name: NODE_SETING_ENUM.R,
    tagName: 'slider',
    label: '半径',
    props: {
      min: 5,
      max: 180
    },
    changeMethod: 'onRadiusChange'
  },

  {
    name: NODE_SETING_ENUM.ANGLE,
    tagName: 'slider',
    label: '旋转',
    props: {
      min: 0,
      max: 360,
      marks: { 0: 0, 45: '', 90: 90, 135: '', 180: 180, 225: '', 270: 270, 315: '', 360: 360 }
    },
    changeMethod: 'onAngleChange'
  },
  {
    name: NODE_SETING_ENUM.FILL,
    tagName: 'c-color-picker',
    label: '填充',
    props: {},
    changeMethod: 'onFillChange'
  }
]

const allBorderOptions = [
  {
    name: NODE_SETING_ENUM.LINE_TYPE,
    tagName: 'line-type',
    label: '类型',
    props: {},
    changeMethod: 'setStrokeDasharray'
  },
  {
    name: NODE_SETING_ENUM.STROKE_WIDTH,
    tagName: 'slider',
    label: '宽度',
    props: {
      min: 1,
      max: 5,
      step: 1
    },
    changeMethod: 'onStrokeWidthChange'
  },
  {
    name: NODE_SETING_ENUM.STROKE,
    tagName: 'c-color-picker',
    label: '颜色',
    props: {},
    changeMethod: 'onStrokeChange'
  }
]

const allTextOptions = [
  {
    name: NODE_SETING_ENUM.FONT_SIZE,
    tagName: 'slider',
    label: '字体大小',
    props: {
      min: 12,
      max: 40,
      step: 1
    },
    changeMethod: 'onFontSizeChange'
  },
  {
    name: NODE_SETING_ENUM.FONT_COLOR,
    tagName: 'c-color-picker',
    label: '字体颜色',
    props: {},
    changeMethod: 'onColorChange'
  },
  {
    name: NODE_SETING_ENUM.LABEL,
    tagName: 'a-textarea',
    label: '内容',
    props: {
      autoSize: {
        minRows: 3
      }
    }
  },
  {
    name: NODE_SETING_ENUM.TEXT_ANCHOR,
    tagName: 'text-align',
    label: '对齐方式',
    props: {},
    changeMethod: 'onTextAnchorChange'
  },
  {
    name: NODE_SETING_ENUM.TEXT_WRAP,
    tagName: 'a-textarea',
    label: '内容',
    props: {
      autoSize: {
        minRows: 3
      }
    }
  }
]

export function generateOptions(cell) {
  if (!cell) {
    return {}
  }
  const { options } = cell.getData() || {}
  if (Array.isArray(options)) {
    const filterFn = (item) => options.includes(item.name)
    const nodeOptions = allNodeOptions.filter(filterFn)
    const borderOptions = allBorderOptions.filter(filterFn)
    const textOptions = allTextOptions.filter(filterFn)
    return {
      nodeOptions,
      borderOptions,
      textOptions
    }
  } else if (typeof options === 'object') {
    const filterFn = (arr, curr) => {
      const option = options[curr.name]
      if (option === true) {
        arr.push(curr)
      } else if (typeof option === 'object') {
        arr.push({
          ...curr,
          props: {
            ...curr.props,
            ...option
          }
        })
      }
      return arr
    }
    const nodeOptions = allNodeOptions.reduce(filterFn, [])
    const borderOptions = allBorderOptions.reduce(filterFn, [])
    const textOptions = allTextOptions.reduce(filterFn, [])
    return {
      nodeOptions,
      borderOptions,
      textOptions
    }
  }
  return {}
}
